<template>
  <div>
     <div align="right" slot="header" class="clearfix">
        <!-- <span>职位基本信息</span> -->
          <!-- style="float: right;" -->
        <el-button
          v-if="showEdit"
          type="primary"
          size="mini"
          @click="editDictForm"
        >编辑</el-button>
          <!-- style="float: right; padding: 7px 20px" -->
        <el-button
          style="padding: 7px 20px"
          v-else
          type="text"
          @click="detailDictForm"
        >详情</el-button>
        <!-- <el-button
          style="float: right; "
          v-if="editStatus"
          type="primary"
          size="mini"
          @click="submitForm()"
        >保存</el-button> -->
      </div>
    <el-form ref="emplEntry" key="emplEntry"  :label-position="labelPosition"  :model="user"  :rules="rules"  size="medium" label-width="100px">
      <el-form-item label="用户昵称" prop="nickName" 
        :rules="editStatus == true ? rules.nickName:[{required:false}]">
          <el-input
            v-if="editStatus"
            size="small"
            v-model="user.nickName"
            auto-complete="off"
            placeholder="请输入用户昵称"
            :style="{ width: '50%' }"
          ></el-input>
          <span v-else>{{user.nickName}}</span>
      </el-form-item>
      <el-form-item label="手机号码" prop="phonenumber"
        :rules="[
          { required: editStatus, message: '邮箱地址不能为空', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址',trigger: ['blur', 'change'],
          },
          ]">
        <el-input 
          v-if="editStatus"
          v-model="user.phonenumber" 
          maxlength="11" 
          :style="{ width: '50%' }"/>
         <span v-else>{{user.phonenumber}}</span> 
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input  v-if="editStatus" v-model="user.email" maxlength="50" :style="{ width: '50%' }" />
        <span v-else>{{user.email}}</span> 
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group  v-if="editStatus" v-model="user.sex">
          <el-radio label="0">男</el-radio>
          <el-radio label="1">女</el-radio>
        </el-radio-group>
         <span v-else>{{user.sex}}</span> 
      </el-form-item>
      <el-form-item label="入职部门" prop="deptId" :rules="editStatus == true ? rules.deptId:[{required:false}]">
        <el-select 
          v-if="editStatus"  
          v-model="user.deptId"
          placeholder="请择选入职部门"
          clearable
          :style="{ width: '50%' }"
        >
          <el-option  
            v-for="(item, index) in deptIdOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
        <span v-else>{{user.deptId}}</span> 
      </el-form-item>
      <el-form-item label="岗位" prop="positionId">
        <el-select 
          v-if="editStatus"
          v-model="user.positionId"
          placeholder="请选择岗位"
          clearable
          :style="{ width: '50%' }"
        >
          <el-option
            v-for="(item, index) in positionIdOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
        <span v-else>{{user.positionId}}</span> 
      </el-form-item>
      <el-form-item label="入职日期" prop="entryDate">
        <el-date-picker v-if="editStatus" 
          v-model="user.entryDate"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :style="{ width: '50%' }"
          placeholder="请选择入职日期"
          clearable
        ></el-date-picker>
        <span v-else>{{user.entryDate}}</span> 
      </el-form-item>
      <el-form-item label="试用期" prop="probationPeriod">
        <el-input-number v-if="editStatus" 
          v-model="user.probationPeriod"
          placeholder="试用期"
        ></el-input-number>
        <span v-else>{{user.probationPeriod}}</span> 
      </el-form-item>
      <el-form-item label="参加工作时间" prop="joinWorkTime">
        <el-date-picker v-if="editStatus" 
          v-model="user.joinWorkTime"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :style="{ width: '50%' }"
          placeholder="请选择参加工作时间"
          clearable
        ></el-date-picker>
        <span v-else>{{user.joinWorkTime}}</span> 
      </el-form-item>
      <el-form-item label="基本工资" prop="basicSalary">
        <el-input v-if="editStatus" 
          v-model="user.basicSalary"
          placeholder="请输入基本工资"
          clearable
          :style="{ width: '50%' }"
        >
        </el-input>
        <span v-else>{{user.basicSalary}}</span> 
      </el-form-item>
      <el-form-item label="绩效工资" prop="performanceSalary">
        <el-input  v-if="editStatus" 
          v-model="user.performanceSalary"
          placeholder="请输入绩效工资"
          clearable
          :style="{ width: '50%' }"
        ></el-input>
        <span v-else>{{user.performanceSalary}}</span> 
      </el-form-item>
      <el-form-item label="证件附件" prop="field107">
        <el-upload
          ref="field107"
          :file-list="field107fileList"
          :action="field107Action"
          :before-upload="field107BeforeUpload"
        >
          <el-button v-if="editStatus" size="mini" type="primary" icon="el-icon-upload"
            >点击上传</el-button
          >
        </el-upload>
      </el-form-item>
    </el-form>
     <div align="center" slot="footer" class="dialog-footer">
        <el-button style="margin: auto;" v-if="editStatus" type="primary" size="mini" @click="submit">保存</el-button>
        <el-button style="align: center;" v-if="editStatus" type="primary" size="mini" @click="submitForm">提交</el-button>
        <el-button style="margin: auto;" type="danger" size="mini" @click="close">关闭</el-button>
     </div>
  </div>
</template>
<script>
import { updateUserProfile } from "@/api/system/user";
export default {

  
  components: {},

  props: {
    user: {
      type: Object,
    },
  },
  // props: [],
  data() {
    return {
      labelPosition: 'left',
      showEdit:true,//默认显示编辑按钮
      editStatus: false, //默认是显示状态 
      user: {
        deptId: undefined,
        positionId: undefined,
        entryDate: null,
        probationPeriod: undefined,
        joinWorkTime: null,
        basicSalary: undefined,
        performanceSalary: undefined,
        field107: null,
      },
      rules:{
        nickName : [
          { required: true, message: "用户昵称不能为空", trigger: "blur" },
        ],
        email: [
          { required: this.editStatus, message: "邮箱地址不能为空", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        phonenumber: [
          { required: this.editStatus, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        deptId: [
          {
            required: true,
            message: "请择选入职部门",
            trigger: "change",
          },
        ],
        positionId: [
          {
            required: true,
            message: "请选择岗位",
            trigger: "change",
          },
        ],
        entryDate: [
          {
            required: true,
            message: "请选择入职日期",
            trigger: "change",
          },
        ],
        probationPeriod: [
          {
            required: true,
            message: "试用期",
            trigger: "blur",
          },
        ],
        joinWorkTime: [
          {
            required: true,
            message: "请选择参加工作时间",
            trigger: "change",
          },
        ],
        basicSalary: [
          {
            required: true,
            message: "请输入基本工资",
            trigger: "blur",
          },
        ],
        performanceSalary: [
          {
            required: true,
            message: "请输入绩效工资",
            trigger: "blur",
          },
        ],
      },
      field107Action: "https://jsonplaceholder.typicode.com/posts/",
      field107fileList: [],
      deptIdOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      positionIdOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 显示编辑按钮控制
    editDictForm() {
      // 点击编辑后，表单为编辑状态
      this.editStatus = true;
      this.showEdit= false;//默认显示编辑按钮  
    },
    detailDictForm(){
      // 点击详情后，表单为浏览状态
      this.editStatus = false;
      this.showEdit= true;//默认显示编辑按钮  
      //this.$refs['emplEntry'].resetFields();
    },
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          updateUserProfile(this.user).then((response) => {
            this.$modal.msgSuccess("修改成功");
          });
        }
      });
    },
    close() {
      this.$tab.closePage();
    },
    submitForm() {
      this.$refs["emplEntry"].validate((valid) => {
        if (valid) return;
        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs["emplEntry"].resetFields();
    },
    field107BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2;
      if (!isRightSize) {
        this.$message.error("文件大小超过 2MB");
      }
      return isRightSize;
    },
  },
};
</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}
</style>
